<template>
  <div class="wechat-discover-page">
    <div class="discover-header">
      <h2>发现</h2>
    </div>
    <div class="video-feed">
      <div
        class="video-card"
        v-for="(item, index) in videoList"
        :key="index"
        @click="playVideo(item.videoUrl)"
      >
        <div class="video-cover-wrapper">
          <div class="video-cover-container">
            <img :src="item.cover" alt="video cover" class="video-cover">
          </div>
          <div class="video-duration">{{ item.duration }}</div>
          <div class="play-icon">
            <svg viewBox="0 0 24 24" width="28" height="28">
              <path fill="currentColor" d="M8,5.14V19.14L19,12.14L8,5.14Z" />
            </svg>
          </div>
        </div>
        <div class="video-info">
          <h3 class="video-title">{{ item.title }}</h3>
          <div class="video-meta">
            <span class="video-author">{{ item.author }}</span>
            <span class="video-stats">
              <span class="views">{{ item.views }}次观看</span>
              <span class="divider">·</span>
              <span class="likes">{{ item.likes }}赞</span>
            </span>
          </div>
          <div class="video-tag">{{ item.type }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const videoList = ref([
  {
    type: '生活',
    duration: '03:09',
    title: '周末宅家必学的5道快手菜，简单又美味',
    author: '美食小当家',
    views: '12.5万',
    likes: '8.2千',
    cover: 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80',
    videoUrl: 'https://v.qq.com/x/cover/mzc00200mp8er9b.html'
  },
  {
    type: '旅行',
    duration: '05:21',
    title: '云南大理3日游攻略，这些地方一定要去',
    author: '旅行达人',
    views: '24.3万',
    likes: '12.1千',
    cover: 'https://images.unsplash.com/photo-1519046904884-53103b34b206?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80',
    videoUrl: 'https://v.qq.com/x/cover/mzc00200mp8er9b.html'
  },
  {
    type: '科技',
    duration: '07:45',
    title: '2023年最值得买的5款手机，性能颜值兼具',
    author: '数码评测君',
    views: '35.7万',
    likes: '15.6千',
    cover: 'https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80',
    videoUrl: 'https://v.qq.com/x/cover/mzc00200mp8er9b.html'
  }
])

const playVideo = (url) => {
  if(url && !url.includes('example.com')) {
    window.open(url, '_blank')
  } else {
    alert('请替换为真实可播放的视频链接')
    console.log('测试点击:', url)
  }
}
</script>

<style scoped>
.wechat-discover-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  max-width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.discover-header {
  background-color: #fff;
  padding: 15px;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 10;
}

.discover-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
  text-align: center;
}

.video-feed {
  padding: 12px;
}

.video-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

.video-cover-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 60%; /* 控制容器高度比例 */
  overflow: hidden;
}

.video-cover-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-cover {
  width: 80%;
  height: 80%;
  object-fit: cover;
  border-radius: 4px;
}

.video-duration {
  position: absolute;
  bottom: 15%;
  right: 12%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-info {
  padding: 15px;
}

.video-title {
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 8px 0;
  color: #333;
  line-height: 1.4;
}

.video-meta {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #999;
  margin-bottom: 10px;
}

.video-author {
  margin-right: 10px;
}

.video-stats {
  display: flex;
  align-items: center;
}

.divider {
  margin: 0 6px;
}

.video-tag {
  display: inline-block;
  background: #f0f0f0;
  color: #666;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
}
</style>
